<!DOCTYPE html>
<html lang="en-US"> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>OpenError Routing Visualization example</title>
    <script type="text/javascript" src="../js/sparklines.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" language="javascript" src="../js/openerror-v1.0.min.js"></script>
<script type="text/javascript"> 
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  
  var map;
  var oe;
  var test = {distance:[],duration:[]};
  
 
  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var myOptions = {
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: new google.maps.LatLng(51.513, -0.135)
    }
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    directionsDisplay.setMap(map);
	
	// create a new openerror object for introducing controlled error
	oe = new OpenError();
	

		var points = {type:"MultiPoint",
				coordinates: [ [51.523, -0.158], [51.505, -0.126] ]};
	oe.setDataSet(points);  // var created on dataset.js file
	oe.setStandardDeviation(90);
	oe.setDebug( false );
	oe.setCorrelated( false );
	
  }
var resp;
 


  function calcRouteTen()
  {
	for(var i=0;i<10;i++)
		calcRoute();
  }
  
  function calcRoute() {
	var new_points = oe.generateDataset()
	
    begin = new google.maps.LatLng(new_points[0].lat, new_points[0].lon);
    end = new google.maps.LatLng(new_points[1].lat, new_points[1].lon);
    var request = {
        origin: begin,
        destination: end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        //directionsDisplay.setDirections(response);
		resp = response;
		test.distance.push(resp.routes[0].legs[0].distance.value);
		test.duration.push(resp.routes[0].legs[0].duration.value);
		
		var opts = {'scale_from':undefined};
		new BarSparkline("sparkline",test.distance,opts).draw();  // plot the sparkline
		new BarSparkline("sparkline2",test.duration,opts).draw();  // plot the sparkline
 
			polylineOptions = {
					map: map,
					strokeColor: "#FF0000",
					strokeOpacity: 0.3,
					strokeWeight: 5,
					path: response.routes[0].overview_path
			}
			new google.maps.Polyline(polylineOptions);
 
      }
    });
  }
</script> 
</head> 
 
<FONT FACE="Arial, Helvetica, Geneva"> 
 
<body style="margin:0px; padding:0px;" onload="initialize()"> 
<h2>Propagating Positional Uncertainty to Routing Applications</h2> 
<p>This example demonstrates how OpenError can be used to propagate
uncertainty to the Google Maps routing application. Positional error (90 m = 1 sd)
is simulated for origin and destination points in central Leicester (UK);
These locations are submitted to the routing API. The route is drawn
with a translucent red line. Press 'Route' to generate another point 
realization, calculate its route, and add it to the map. Small
differences in position can result in wildly different routes - this is 
error propagation!</p> 
<p>To route between your choice of spots, type in your own locations: 
Lat-Lon pairs, addresseses, or placenames. Change the magnitude of the
introduced error by modifying Sigma. Press 'Geocode' to identify the locations,
then press 'Route', or 'Route 10x', to observe variations in your trip.</p> 

<div>
	<table>
	<tr>
		<td>
			<div id="map" style="width:500px;height: 400px;border: 1px solid black;float: left;">
		</td>
		<td style="vertical-align:top;">
		<input type="button" value="Generate New Route" onclick="calcRoute()" /><br/>
		<!--New Point: <span id="pointText"></span><br/>-->
		Distances (meters): <canvas id="sparkline" style="height:16px;width:200px;"></canvas><br/>
		Times (seconds): <canvas id="sparkline2" style="height:16px;width:200px;"></canvas><br/>
		<!--Histogram:
		<div id="chart" style="width: 300px; height: 150px;"></div>
		<p>The first bar is the number of distances within 1 standard deviations (i.e. < 90m ), the second bar is the number of distances in between 1 and 2 standard deviations.</p>
		-->
		</td>
	</tr>
	</table>

</div>

</body> 
</html> 